<template>
	<view class="pageview">
		<zx-nav title="银行卡" bg="#fff"></zx-nav>
		<view class="card mt20">
			<view class="group-row flex align-center">
				<span class="title">真实姓名</span>
				<input class="flex-sub" placeholder="真实姓名" name="input" v-model="info.card_name" />
			</view>
			<view class="group-row flex align-center">
				<span class="title">联系电话</span>
				<input class="flex-sub" type="number" placeholder="联系电话" name="input" v-model="info.tel_no" />
			</view>
			<view class="group-row flex align-center">
				<span class="title">开户银行</span>
				<input class="flex-sub" type="text" placeholder="开户银行" v-model="info.cert_name" />
			</view>
			<view class="group-row flex align-center">
				<span class="title">银行卡号</span>
				<input class="flex-sub" placeholder="银行卡号" type="number" name="input" v-model="info.card_id" />
			</view>
			<view class="group-row flex align-center">
				<span class="title">身份证号</span>
				<input class="flex-sub" placeholder="身份证号" name="input" v-model="info.cert_id" />
			</view>
		</view>
		<view class="mt40"><u-button @click="saveInfo" type="success" shape="circle" :loading="btnLoading" text="保存"></u-button></view>
		<!-- <view class="submitBtn" @tap="saveInfo">保存</view> -->
	</view>
</template>

<script>
// import { regPhone, regcertId } from '@/utils/index';
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			info: {
				card_name: '',
				tel_no: '',
				card_id: '',
				cert_id: '',
				cert_name: ''
			}
		};
	},
	onLoad() {
		this.getPayment();
	},
	methods: {
		saveInfo() {
			let that = this;
			/* 保存银行信息 */
			for (var key in this.info) {
				if (this.info[key] === '') {
					uni.showToast({
						title: '请完善银行信息',
						icon: 'none'
					});
					return false;
				}
				if (key == 'tel_no' && !uni.$u.test.mobile(this.info[key])) {
					uni.showToast({
						title: '请填写正确的手机号码',
						icon: 'none'
					});
					return false;
				}
				if (key == 'cert_id' && !uni.$u.test.idCard(this.info[key])) {
					uni.showToast({
						title: '请填写正确的身份证号码',
						icon: 'none'
					});
					return false;
				}
			}
			let param = Object.assign({}, this.info);
			this.$postAction(this.$api.updatePayment, param).then(da => {
				if (da.code == 0) {
					uni.showToast({
						title: '修改成功',
						icon: 'success'
					});
					uni.navigateBack({
						delta: 1
					});
				}
			});
		},
		getPayment() {
			this.$postAction(this.$api.getPayment).then(da => {
				if (da.code == 0) {
					for (var key in this.info) {
						this.info[key] = da.data[key];
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.pageview {
	margin: 0 40upx;
	font-size: 26upx;
	color: #878787;

	.group-row {
		padding: 30upx 20upx;
		border-bottom: 1px solid #e5e5e5;

		.title {
			color: #000;
			font-size: 28upx;
			// font-weight: bold;
			margin-right: 20rpx;
		}
	}

	.submitBtn {
		margin-top: 45upx;
	}
}
</style>
